<template>
	<view class="container">
		<view class="title">个人中心</view>
		<view class="headimage">
			<image :src="userInfo.avatar"></image>
		</view>
		<view class="info">
			<view class="name">
				{{ userInfo.nickName }}
			</view>
			<view class="phone">
				{{ userInfo.phone }}
			</view>
		</view>

		<!-- 优惠券 -->
		<uni-card @click="toCoupons" margin="30rpx 20rpx 0 20rpx" padding="40rpx 0" style="border-radius: 10px;">
			<view style="display: flex; align-items: center;">
				<image src="/static/my/coupon.png" style="width: 50rpx; height: 40rpx;"></image>
				<view style="margin-right: auto; margin-left: 10px; font-weight: 600;">我的优惠券</view>
				<view>{{couponCount}}张</view>
				<image src="/static/my/arrow.png" style="width: 10px; height: 15px; margin: 0 10px;"></image>
			</view>
		</uni-card>

		<!-- 我的订单 -->
		<uni-card title="我的订单" extra="全部订单" style="border-radius: 10px; font-weight: 600;">
			<view class="order">
				<image @click="toDaizhifu" src="/static/my/待支付.png"></image>
				<image @click="toDaishiyong" src="/static/my/待使用.png"></image>
				<image @click="toDaipingjia" src="/static/my/待评价.png"></image>
			</view>
		</uni-card>

		<!-- 我的服务 -->
		<uni-card title="我的服务" style="border-radius: 10px; font-weight: 600;">
			<view class="server">
				<view @click="toCouponCenter" class="server-item">
					<image src="/static/my/领券中心.png"></image>
					<view>领券中心</view>
				</view>
				<view class="server-item">
					<image src="/static/my/邀请好友.png"></image>
					<view>邀请好友</view>
				</view>
				<view @click="toMyCars" class="server-item">
					<image src="/static/my/我的车辆.png"></image>
					<view>我的车辆</view>
				</view>
				<view @click="toExpense" class="server-item">
					<image src="/static/my/消费记录.png"></image>
					<view>消费记录</view>
				</view>
			</view>
			<view class="server">
				<view @click="toRepair" class="server-item">
					<image src="/static/my/我的维修.png"></image>
					<view>我的维修</view>
				</view>
				<view class="server-item">
					<image src="/static/my/意见反馈.png"></image>
					<view>意见反馈</view>
				</view>
				<view class="server-item">
					<image src="/static/my/收货地址.png"></image>
					<view>收货地址</view>
				</view>
			</view>
		</uni-card>

		<view class="logout">
			<button @click="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import baseUrl from '/pages/utils/urlConfig.js'
	export default {
		data() {
			return {
				userInfo: {},
				couponCount: 0
			}
		},
		onLoad() {
			this.getInfo()
			console.log(this.userInfo)
		},
		mounted() {
			this.fetchCoupons()
		},
		methods: {
			getInfo() {
				this.userInfo = uni.getStorageSync('user')
				console.log(typeof this.userInfo)
			},
			fetchCoupons() {
				uni.request({
					url: baseUrl + '/yyq/usercoupon/getquan/' + this.userInfo.id,
					method: 'GET',
					header: {
						Authorization: uni.getStorageSync('Token')
					},
					success: res => {
						console.log('获取成功111', res.data.data.length)
						this.couponCount = res.data.data.length
					}
				})
			},
			//跳转到优惠券
			toCoupons() {
				uni.navigateTo({
					url: `/pages/my/coupons/Coupons?id=${this.userInfo.id}`, // 传递用户 ID
					success: (success) => {}
				})
			},
			//跳转到待支付
			toDaizhifu() {
				uni.navigateTo({
					url: '/pages/my/myorders/daizhifu',
					success: (success) => {}
				})
			},
			//跳转到待使用
			toDaishiyong() {
				uni.navigateTo({
					url: '/pages/my/myorders/daishiyong',
					success: (success) => {}
				})
			},
			//跳转到待评价
			toDaipingjia() {
				uni.navigateTo({
					url: '/pages/my/myorders/daipingjia/daipingjia',
					success: (success) => {}
				})
			},
			//跳转到领券中心
			toCouponCenter() {
				uni.navigateTo({
					url: `/pages/my/coupons/CouponCenter?id=${this.userInfo.id}`,
					success: (success) => {}
				})
			},
			//跳转到我的车辆页面
			toMyCars() {
				uni.navigateTo({
					url: `/pages/my/mycar/MyCars?id=${this.userInfo.id}`,
					success: (success) => {}
				})
			},
			//跳转到消费记录页面
			toExpense() {
				uni.navigateTo({
					url: `/pages/my/expense/ExpenseRecords?id=${this.userInfo.id}`,
					success: (success) => {}
				})
			},
			//跳转到我的维修页面
			toRepair() {
				uni.navigateTo({
					url: '/pages/my/repair/Repair',
					success: (success) => {}
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定退出登录？',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync()
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 400rpx;
		background-image: url(/static/my/homebg.png);
		background-size: 100%;
	}

	.title {
		color: white;
		width: 100%;
		text-align: center;
		padding-top: 30rpx;
	}

	.headimage {
		width: 100%;
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
	}

	.headimage image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10000px;
	}

	.info {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx;
		color: white;
	}

	.phone {
		font-size: 13px;
		margin-left: 16rpx;
	}

	.order {
		display: flex;
		justify-content: space-between;
	}

	.order image {
		width: 30%;
		height: 100rpx;
	}

	.server {
		display: flex;
		padding: 20px 0;
	}

	.server-item {
		width: 25%;
		text-align: center;
	}

	.server-item image {
		width: 30px;
		height: 30px;
	}

	.logout {
		padding: 20px 40px 100px 40px;
	}

	.logout button {
		background-color: #d9d9d9;
		color: white;
		border-radius: 20px;
	}
</style>